<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/iconfont.css" type="text/css">
	<link rel="stylesheet" href="css/bg.css" type="text/css">

</head>


<body>

	
<table border="1">
<thead>
    <tr class="ta-hed"><th colspan="5" >购物清单</th></tr>
	

	<tr>
	<th>序号</th>
	<th>商品</th>
	<th>商品数量</th>
	<th>商品价格</th>
	<th>操作</th>
	</tr>

	
</thead>

<tbody>
<tr>
<td>1</td>
<td>苹果</td>
<td>学梨</td>
<td>葡萄</td>
<td><button class="a">删除</button>
<button class="b">添加</button></td>
</tr>


<tr>
<td>2</td>
<td>苹果</td>
<td>学梨</td>
<td>葡萄</td>
<td><button class="a">删除</button>
<button class="b">添加</button></td>
</tr>

<tr>
<td>3</td>
<td>苹果</td>
<td>学梨</td>
<td>葡萄</td>
<td><button class="a">删除</button>
<button class="b">添加</button></td>
</tr>


<tr>
<td>4</td>
<td>苹果</td>
<td>学梨</td>
<td>葡萄</td>
<td><button class="a">删除</button>
<button class="b">添加</button></td>
</tr>


<tr class="zj">
<th colspan="5" >总计</th>
</tr>
</tbody>

</table>






<div class="shade">
 <div class="foem-panel">

 	<div class="form-inner">
 	<i class="iconfont icon-close-circle"></i>
 		<h5>商品添加框</h5>
     <input type="text" value="" placeholder="请输入商品名称"><br>
     <input type="text" value="" placeholder="请输入商品数量"><br>
     <input type="text" value="" placeholder="请输入商品单价"> <br>
     
      <div>
       <button class="btn">确定</button>
       <button class="btn1">取消</button>
    
     </div>



 	</div>
</div>




</div>



<script src="https://code.jquery.com/jquery-3.3.1.js"> </script>


<script>



$(".btn,.iconfont,.btn1").click(function(){
  $(".shade").hide();
});



$(".b").click(function(){
	$(".shade").show();
});


// 删除
$(".a").click(function(){
$(this).parent().parent().remove();




})



</script>




</body>
</html>